<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/art-template/lib/template-web.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<form action="" id="user_form">
    <script type="text/tempalte" id="tpl">
        <div>
            <h3>用户名</h3>
            <input type="text" value="{{user.username}}">
        </div>
        <div>
            <h3>年龄</h3>
            <input type="text" value="{{user.age}}">
        </div>
        <div>
            <h3>职业</h3>
            <select name="" id="">
                {{each jobs}}
                    {{if user.job===$value.id}}
                        <option value="{{$value.id}}" selected>{{$value.name}}</option>
                    {{else}}
                        <option value="{{$value.id}}">{{$value.name}}</option>
                    {{/if}}
                {{/each}}
            </select>
        </div>
    </script>
</form>
    <script>
        var data={}
        pGet('http://127.0.0.1:3000/users/1')
        .then(function (userData) {
            // console.log(userData)
            data.user=userData
            return $.get('http://127.0.0.1:3000/jobs')
        })
        .then(function (jobDate) {
            // console.log(jobDate)
            data.jobs=jobDate
            console.log(data)
            var htmlStr=template('tpl',data)
            document.getElementById('user_form').innerHTML=htmlStr
        })


        // get('http://127.0.0.1:3000/users/1',function (userData) {
        //     get('http://127.0.0.1:3000/jobs',function (jobDate) {
        //         console.log(userData,jobDate)
        //         var htmlStr=template('tpl',{
        //             user:JSON.parse(userData),
        //             jobs:JSON.parse(jobDate)
        //         })
        //         console.log(htmlStr)
        //         document.getElementById('user_form').innerHTML=htmlStr
        //     })
        // })


        // function get(url,callback) {
        //     var oReq=new XMLHttpRequest()
        //     oReq.onload=function () {
        //         callback(oReq.responseText)
        //     }
        //     oReq.open('get',url,true)
        //     oReq.send()
        // }

        function pGet(url,callback) {
            return new Promise(function (resolve, reject) {
                var oReq=new XMLHttpRequest()
                oReq.onload=function () {
                    callback && callback(JSON.parse(oReq.responseText))
                    resolve(JSON.parse(oReq.responseText))
                }
                oReq.onerror=function(err){
                    reject(err)
                }
                oReq.open('get',url,true)
                oReq.send()
            })
        }
        pGet('http://127.0.0.1:3000/users/1')
        .then(function (data) {
            console.log(data)
        })
    </script>

</body>
</html>
